<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加用户</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .container {
            max-width: 600px;
            margin-top: 30px;
        }
        .bi-person-plus {
            margin-right: 10px;
        }
        .form-group label {
            font-weight: 500;
        }
        .btn-submit {
            margin-right: 15px;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="form-inline">
        <h2 style="text-align: left; margin-left: 10px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" fill="#28a745" class="bi bi-person-plus" viewBox="0 0 16 16">
                <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
                <path fill-rule="evenodd" d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z"/>
            </svg>
            <span>添加用户</span>
        </h2>
    </div>

    <form id="addUserForm">
        <div class="form-group">
            <label for="userName">用户名：</label>
            <input type="text" class="form-control" id="userName" name="userName" required
                   placeholder="请输入用户名（4-16位字符）">
        </div>
        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" class="form-control" id="password" name="password" required
                   placeholder="请输入密码（6-18位字符）">
        </div>
        <div class="form-group" style="text-align: right">
            <button type="button" class="btn btn-success btn-lg btn-submit" onclick="submitUser()">提交</button>
            <button type="button" class="btn btn-secondary btn-lg" onclick="javascript:history.back()">返回</button>
        </div>
    </form>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
    function submitUser() {

        if ($("#userName").val().trim() === '') {
            alert("用户名不能为空");
            return;
        }
        if ($("#password").val().trim() === '') {
            alert("密码不能为空");
            return;
        }

        $.ajax({
            type: "post",
            url: "/user/register",
            data: $("#addUserForm").serialize(),
            success: function(result) {
                if (result.status == "SUCCESS") {
                    alert("用户添加成功！");
                    location.href = "/normal_user_list.html";
                } else {
                    alert("添加失败!");
                }
            },
            error: function() {
                alert("系统异常，请稍后重试");
            }
        });
    }
</script>
</body>
</html>